<template>
  <div>
    <div class="top">
      <van-nav-bar title="购物车"  left-arrow @click-left="routerBack" @click-right="routerSearch">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="cartbody">
      <div class="notlogged" v-if="!shoppingRes.length">
        <van-icon name="shopping-cart-o" size="40" />
        <p>购物车还是空的</p>
        <van-button type="default" hairline  size="small" to="/search/list">去逛逛</van-button>
      </div>
      <div class="commodity" v-else v-for="(item,index) in shoppingRes" :key="index">
        <van-checkbox v-model="item.checked"></van-checkbox>
        <van-image
          width="5rem"
          height="3rem"
          fit="contain"
          :src="item.img"
        />
        <div class="tetx">
          <div>{{ item.goodsName }}</div>
          <div>{{ item.explain }}</div>
          <div>{{ item.price }}元</div>
          <van-stepper step="step" disable-input v-model="item.num" @minus="minus(item.id)"  input-width="40px" @plus="plus(item.id)" @change="Stepchange(item.id)"  button-size="32px" />
        </div>
      </div>
      <div class="Tips">
        <p>温馨提示，产品是否购买成功，以最终下单为准，请尽快结算</p>
      </div>
    </div>
    <div class="footer">
      <div class="price">
        <div>共 {{ checked_num }} 件</div>
        <div>{{Total}}元</div>
      </div>
      <button class="button1" @click="shopping">继续购物</button>
      <button class="button2">去结算</button>
    </div>
  </div>
</template>

<script>
import {defineComponent , onMounted,ref,computed} from 'vue'
import { useRouter ,useRoute} from 'vue-router'
import { Toast } from 'vant'
import {useStore} from 'vuex';
export default defineComponent({
  setup(){
    // 商品信息数据 
    let shoppingRes = ref([])
    const store = useStore()
    shoppingRes.value = store.state.goodcart
    // 左侧回退按钮 
    let router = useRouter()
    let route = useRoute()
    function routerBack(){
      router.back()
      //  router.back()
    }
    // 右侧搜索按钮
    function routerSearch(){
      router.push({path:'/search/list'})
    }
    // 商品单选框
    let checked = ref(false)
    function radio(){
     if(checked.value){
       checked.value= false
     }else{
      checked.value = true
     }
    }
    // 步进器
    let step = ref(1)
    let value = ref(1);
    function plus(id){
      store.commit('setGoodsNum',id)
    }
    function minus(id){
      store.commit('minus',id)
    }
    function Stepchange(id){
      store.commit('change',id)
      shoppingRes.value = store.state.goodcart
    }
    // 结算功能
    let Total = computed(()=>{
      return shoppingRes.value.filter((item)=>item.checked===true).reduce((i,t)=>i+=(t.price*t.num),0)
    })
    let checked_num = computed(()=>{
      return shoppingRes.value.filter((item)=>item.checked===true).reduce((i,t)=>i+=t.num,0)
    })
    function shopping(){
      router.push('/category')
    }
    return {routerBack,routerSearch,checked,radio,value,plus,minus,Stepchange,step,shoppingRes,Total,checked_num,shopping}
  }
})
</script>

<style lang="scss" scoped>
.notlogged{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background-color: #ebebeb;
  margin-bottom: 10px;
}
.commodity{
  display: flex;
  align-items: center;
  height: 32vw;
  background-color: #fff;
  .tetx{
    display: flex;
    height: 3rem;
    font-size: 14px;
    flex-direction: column;
    justify-content: space-between;
  }
}
.Tips{
  height: 80px;
  background-color:#ebebeb ;
 p{
  display: block;
  width:100% ;
  height: 20px;
  font-size: 3.2vw;
  color: #999;
  padding: 0 0 10px 0;
  background-color: #fff;
  text-align: center;
 }
}
.footer{
  display: flex;
  height: 1.2rem;
  width: 100%;
  font-size: 14px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  .price{
    width: 33.3%;
    text-align: center;
    background-color: #fff;
  }
  button{
    border: none;
    width: 33.3%;
  }
  .button1{
    background-color: #eee;
    color: #666;
  }
  .button2{
    background-color: #ff6700;
    color: #fff;
  }
}
</style>